<template>
    <div  >
        <div style="margin: 20px ;">
            <div style="margin: 20px 10px">
                <el-button type="primary" style="margin: 0 10px" @click="add">新增</el-button>
                <el-input v-model="search " style="width: 20%" clearable placeholder="请输入名称查询"></el-input>
                <el-button type="primary" style="margin: 0 10px" @click="load">查询</el-button>

                <el-button type="primary" style="margin: 0 10px" @click="write">去写作</el-button>
            </div>

            <el-table :data="tableData" stripe style="width: 100%" tooltip-effect="dark">
                <el-table-column prop="id" label="ID" sortable align="center"></el-table-column>
                <el-table-column prop="name" label="名称" align="center"></el-table-column>
                <el-table-column prop="intro" label="简介" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="bookType" label="类型" align="center"></el-table-column>
                <el-table-column prop="bookLabel" label="标签" align="center"></el-table-column>
                <el-table-column label="封面">
                    <template #default="scope">
                        <el-image
                                style="width: 50px; height: 50px"
                                :src="scope.row.cover"
                                :preview-src-list="[scope.row.cover]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template #default="scope">
                        <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="handleDelete( scope.row.id)">
                            <template #reference>
                                <el-button type="text" style="color: #ff4268">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 20px 10px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"></el-pagination>
            </div>
            <!--弹窗-->
            <el-dialog title="书籍信息" v-model="dialogVisible" width="50%">
                <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name" style="width: 80%"></el-input>
                    </el-form-item>

                    <el-form-item label="类型" prop="bookType">
                        <el-select v-model="form.bookType" filterable allow-create default-first-option clearable
                                   style="width:80%">
                            <el-option :value="form.bookType">
                                <span style="float: left">{{ form.bookType }} </span>
                            </el-option>
                            <el-option v-for="b in bookType" :key="b.id" :label="b.name" :value="b.name">
                                <span style="float: left">{{ b.name }} </span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标签" prop="bookLabel">
                        <el-select v-model="form.bookLabel" filterable allow-create default-first-option clearable
                                   style="width:80%">
                            <el-option :value="form.bookLabel">
                                <span style="float: left">{{ form.bookLabel }} </span>
                            </el-option>
                            <el-option v-for="b in bookLabel" :key="b.id" :label="b.label" :value="b.label">
                                <span style="float: left">{{ b.label }} </span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="简介" prop="intro">
                        <el-input type="textarea" v-model="form.intro" style="width: 80%"></el-input>
                    </el-form-item>

                    <el-form-item label="封面">
                        <el-upload class="upload-demo" drag
                                   action="http://114.115.144.177:9977/files/upload" :on-success="fileUploadSuccess">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <template #tip>
                                <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
                            </template>
                        </el-upload>
                        <div class="demo-image__preview" v-if="form.cover">
                            <el-image
                                    style="width: 100px; height: 150px"
                                    :src="form.cover"
                                    :preview-src-list="form.cover">
                            </el-image>
                        </div>
                    </el-form-item>
                </el-form>

                <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
                </template>
            </el-dialog>

        </div>
    </div>

</template>

<script>
    import request from "../../utils/request";

    export default {
        name: 'BookView',
        components: {},
        created() {
            this.load()
        },
        methods: {
            fileUploadSuccess(res) {
                this.form.cover = res.data
            },
            load() {
                request.get("/book", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res => {
                    console.log(res)
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            add() {
                this.dialogVisible = true
                this.getAllBookType()
                this.getAllBookLabel()
                this.form = {}
                if (this.$refs['upload']) {
                    this.$refs['upload'].clearFiles()
                }

            },
            getAllBookType() {
                request.get("/bookType/getAllBookType").then(res => {
                    console.log(res)
                    if (res.code == "0") {
                        this.bookType = res.data
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                })
            },
            getAllBookLabel() {
                request.get("/bookLabel/getAllBookLabel").then(res => {
                    console.log(res)
                    if (res.code == "0") {
                        this.bookLabel = res.data
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                })
            },
            write(){
                this.$router.push("/write")
            },

            save() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (this.form.id) {
                            console.log(this.form)
                            request.put("/book", this.form).then(res => {
                                if (res.code == "0") {
                                    this.$message({
                                        type: "success",
                                        message: "更新成功！"
                                    })
                                    this.dialogVisible = false
                                    this.load()
                                } else {
                                    this.$message({
                                        type: "error",
                                        message: res.msg
                                    })
                                }
                            })
                        } else {

                            request.post("/book", this.form).then(res => {
                                if (res.code == "0") {
                                    this.$message({
                                        type: "success",
                                        message: "新增成功！"
                                    })
                                    this.dialogVisible = false
                                    this.load()
                                } else {
                                    this.$message({
                                        type: "error",
                                        message: "新增失败！"
                                    })
                                }
                            })
                        }
                    }
                })

            },

            handleEdit(row) {
                this.form = JSON.parse(JSON.stringify(row))
                this.dialogVisible = true
                this.getAllBookType()
                this.getAllBookLabel()
                this.$nextTick(() => {
                    if (this.$refs['upload']) {
                        this.$refs['upload'].clearFiles()
                    }
                })
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load();
            },
            handleCurrentChange(pageNum) {
                this.currentPage = pageNum
                this.load()
            },
            handleDelete(id) {
                request.delete("/book/" + id).then(res => {
                    if (res.code == "0") {
                        this.$message({
                            type: "success",
                            message: "删除成功！"
                        })
                        this.dialogVisible = false
                        this.load()
                    } else {
                        this.$message({
                            type: "error",
                            message: "删除失败！"
                        })
                    }
                })
            }
        },

        data() {
            return {
                search: '',
                form: {},
                bookType: {},
                bookLabel: {},
                rules: {
                    name: [{required: true, message: '请输入', trigger: 'blur'},],
                    price: [{required: true, message: '请输入', trigger: 'blur'},],
                    author: [{required: true, message: '请输入', trigger: 'blur'},],
                    bookType: [{required: true, message: '请输入', trigger: 'blur'},],

                },
                dialogVisible: false,
                currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: []

            }
        },
    }
</script>
